<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>个人资料</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <!--<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"/>-->
    <script src="./js/jquery.js"></script>
    <script src="lib/layer/layer.js"></script>
    <!--<script src="lib/sweet-alert.min.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">-->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/base.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/vue/vue-resource.min.js"></script>
    <script src="./js/webuploader.html5only.min.js"></script>
    <link rel="stylesheet" href="./css/iconfont1.css"/>
    <style>
        #upload div{
            height: 100px !important;
        }
    </style>
</head>
<script type="text/javascript">
    (function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    }());
</script>
<body>
<div class="perCenter" id="app">
    <div class="per_left">
        <p><span class="bottom_color">首页</span> > <span>个人中心</span></p>
        <div class="data">
            <div class="photo">
                <img :src="info.real_avatar" alt=""/>
                <p v-text="info.name"></p>
            </div>
            <ul class="name">
                <a href="./task_center.html"><li ><i class="icon iconfont icon-zhengjianhao-copy"></i>任务中心</li></a>
                <a href="./myVirtual.html"><li ><i class="icon iconfont icon-zhuji2"></i>我的虚拟机</li></a>
                <a href="./personalData.html"><li class="person"><i class="icon iconfont icon-gerenziliao"></i>个人资料</li></a>
                <a href="./invitedShare.html"><li > <i class="icon iconfont">&#xe690;</i>邀请分享</li></a>
                <a href="./password.html"><li > <i class="icon iconfont icon-xiugaimima"></i>修改密码</li></a>
            </ul>
        </div>
    </div>
    <div class="task" style="margin-top: 60px;">
        <div class="dataP">
            <div class="photoX">
                <img :src="info.real_avatar" alt=""/>
                <div id="upload" class="hload" style=" width: 100px;height:100px;z-index: 1000;position: absolute;top:30px;left: 50%;margin-left: -50px;opacity: 0"></div>
                <p v-text="info.name"></p>
            </div>
            <ul class="content">
                <li>
                    <div class="div">
                        <label>账号 :</label>
                        <span v-if="info.reg_type == 1" v-text="info.phone"></span>
                        <span v-if="info.reg_type == 2" v-text="info.email"></span>
                    </div>

                </li>
                <li>
                    <div class="div">
                        <label>昵称 :</label>
                        <div class="noE finish">
                            <span v-text="info.name"></span>
                            <img class="po_ri" src="./images/edit.png" @click="set()" alt=""/>
                        </div>
                        <div class="noE setX" style="display: none">
                            <input class="Iname" type="text" v-model="name"/>
                            <input class="Ibtn po_ri" type="button" value="完成" @click="finished()"/>
                        </div>
                    </div>

                </li>
            </ul>
            
        </div>
    </div>
</div>
<div class="footer"></div>
</body>
<script>
    (function () {
        var app = new Vue({
            el: '#app',
            data: function () {
                return{
                    info:[],
                    name:''
                }
            },
            mounted: function () {
                this.showData();
//需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
                var _this = this;
                var uploader = WebUploader.create({
                    auto: true,
                    // 文件接收服务端。
                    server: url + 'user/modify-avatar',

                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#upload',
                    fileVal:'avatar',
                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                    resize: false,
                    fileSingleSizeLimit:2097152,
                    accept:{
                        title: 'avatar',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    },
                    headers:{
                        'X-XSRF-TOKEN': decodeURIComponent(getCookie('XSRF-TOKEN'))
                    }
                });
                // uploader.on('')
                uploader.on('uploadSuccess', function( file, response  ) {
                console.log(response);
                    if(response.code == '200'){
                        tip(response.msg)
                        _this.showData();
                    }else{
                        alert(response.msg);
                    }
                })
            },
            methods: {
                showData: function () {
                    var _this = this;
                    get(url + 'user/info', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.info = res.body.data
                                    _this.name = res.body.data.name
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                set:function(){
                    $('.finish').css('display','none')
                    $('.setX').css('display','inline-block')
                },
                finished:function(){
                    var _this = this;
                    if(app.name == ''){
                         tip('请输入要修改的昵称')
                    }else{
                        post(url + 'user/modify-nickname',{nickname:app.name}).then(
                                function (res) {
                                    if (res.body.code == 101) {
                                        tip(res.body.msg);
                                        location.href = './login.html'
                                    } else if (res.body.code == 400) {
                                        tip(res.body.msg);
                                    } else {
                                        tip(res.body.msg);
                                        _this.showData();
                                        $('.finish').css('display','inline-block')
                                        $('.setX').css('display','none')
                                    }
                                }, function (reason) {
                                    tip('请求错误')
                                });
                    }
                }
            }
        })
    })()
    $('.footer').load("./footer.html")
</script>
</html>